<?php
/**
 * XuYuan Project
 *
 * @package	XueYuan 
 * @author	Jiuchi Team
 * @since	Version 1.0.0
 * @filesource
 */
defined('BASEPATH') OR exit('No direct script access allowed');
/**
 * Login view
 * @author Wayne Yu
 */
?>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <?php $this->load->view('common/head');?>
	<!-- Page special css -->
    <link rel="stylesheet" type="text/css" href="/assets/css/mycenter.css">
    <link rel="stylesheet" href="/assets/css/jquery.Jcrop.min.css" type="text/css" />
    <style type="text/css">
        /* The Javascript code will set the aspect ratio of the crop
           area based on the size of the thumbnail preview,
           specified here */
        .jcrop-holder #preview-pane {
            display: block;
            position: absolute;
            z-index: 2000;
            top: 0px;
            right: -180px;
            background-color: white;

            /*
            padding: 6px;
            border: 1px rgba(0,0,0,.4) solid;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;

            -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
            box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);*/
        }

        #preview-pane .preview-container {
            width: 150px;
            height: 150px;
            overflow: hidden;
        }
        body{
            padding: 0;
        }
    </style>
    <script src="/assets/js/jquery.Jcrop.min.js"></script>
</head>
<body>
    <div id="upAvatarModule" style="overflow:hidden;">
        <div style="width:100%; height:30px; line-height:30px; 
            margin-bottom:10px; padding-left:10px; color:white; background:#0072DC;box-sizing: border-box;">
            上传头像
        </div>
        <div style="padding:0px 10px 20px 10px;">
            <table>
                <tr>
                    <td>选择文件：</td>
                    <td colspan="2">
                    <form action="<?php echo site_url('mycenter/editHeadportrait')?>" method="post" enctype="multipart/form-data">
                        <input type="file" id="fulImage" name="fulImage" />
                        <input type="submit" id="btnUpload" value="上传" class="button2"/>
                    </form>
                    </td>
                
                </tr>
                <tr style="vertical-align:top;">
                    <td>头像预览：</td>
                    <td style="padding-right:10px;">
                        <img ID="imgPhotoOrigin" Width="400px" src="<?php echo $tempImg?>" />
                    </td>
                    <td>
                        <div id="preview-pane">
                            <div class="preview-container">
                                <img id="imgPhotoTarget" Width="400px" class="jcrop-preview"
                                    src="<?php echo $tempImg?>" />
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                    <form action="<?php echo $saveUrl?>" method="post">
                        <input type="hidden" name="X1" id="X1" value=""/>
                        <input type="hidden" name="Y1" id="Y1" value=""/>
                        <input type="hidden" name="Width" id="Width" value=""/>
                        <input type="hidden" name="Height" id="Height" value=""/>
                        <input type="submit" id="btnSave" value="保存" class="button2"/>
                    </form>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <!-- Page special scripts -->
    <script type="text/javascript">
        jQuery(function ($) {
            // Create variables (in this scope) to hold the API and image size
            var jcrop_api,
                boundx,
                boundy,

                // Grab some information about the preview pane
                $preview = $('#preview-pane'),
                $pcnt = $('#preview-pane .preview-container'),
                $pimg = $('#preview-pane .preview-container img'),

                xsize = $pcnt.width(),
                ysize = $pcnt.height();

            console.log('init', [xsize, ysize]);
            $('#imgPhotoOrigin').Jcrop({
                setSelect: [ 0, 0, 150, 150 ],
                onChange: updatePreview,
                onSelect: updatePreview,
                aspectRatio: xsize / ysize
            }, function () {
                // Use the API to get the real image size
                var bounds = this.getBounds();
                boundx = bounds[0];
                boundy = bounds[1];
                // Store the API in the jcrop_api variable
                jcrop_api = this;

                // Move the preview into the jcrop container for css positioning
                $preview.appendTo(jcrop_api.ui.holder);
            });

            function updatePreview(c) {
                if (parseInt(c.w) > 0) {
                    var rx = xsize / c.w;
                    var ry = ysize / c.h;

                    $('#X1').val(c.x);
                    $('#Y1').val(c.y);
                    $('#Width').val(c.w);
                    $('#Height').val(c.h);
                    
                    $pimg.css({
                        width: Math.round(rx * boundx) + 'px',
                        height: Math.round(ry * boundy) + 'px',
                        marginLeft: '-' + Math.round(rx * c.x) + 'px',
                        marginTop: '-' + Math.round(ry * c.y) + 'px'
                    });
                }
            };
        });
    </script>
</body>
</html>

